<template>
  <el-form-item :label="item.label" :prop="item.prop" class="label">
    <el-tooltip
      class="item"
      effect="dark"
      :content="labelName"
      placement="left"
    >
      <template v-if="!item.textarea">
        <span v-bind:class="labelClass" v-bind:style="labelStyle">
          {{ labelName }}
        </span>
      </template>
      <template v-else>
        <el-input
          type="textarea"
          :class="labelClass"
          :style="labelStyle"
          :autosize="{ minRows: item.minRows || 3, maxRows: item.maxRows || 5 }"
          v-model="labelName"
          :disabled="disabled"
        >
        </el-input>
      </template>
    </el-tooltip>
  </el-form-item>
</template>

<script>
import _ from "lodash";
// import { Dict } from "../../utils/Utils";
import utils from "../../utils/Format";

export default {
  name: "inputCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return true;
      }
    }
  },
  computed: {
    labelName() {
      const item = this.item;
      if (item.formatter) {
        return item.formatter(this.formData, this.formData[item.prop]);
      }
      if (item.dict) {
        // return Dict.getDictLable(item.dict, this.formData[item.prop]);
      } else {
        return utils.strIsNull(this.formData[item.prop]);
      }
    },
    labelClass() {
      return this.item.labelClass ? this.item.labelClass : "";
    },
    labelStyle() {
      return this.item.labelSytle ? this.item.labelSytle : "";
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  color: #909399;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
